<script setup>
import {
  canteenImport,
  canteenUpdate,
  canteenPageList,
} from "@/api/dailyPaper/canteen";
import useTable from "@/hooks/useTable";
import { ElMessage, ElUpload, ElInput } from "element-plus";
import { canteenColumns } from "../columns";
import { ref } from "vue";
const fileList = ref([]);

const {
  dataSource,
  pagination,
  onPageChange,
  getDataSource,
  onSave,
  onCancel,
  onEdit,
  CustomTable,
  CustomForm,
} = useTable({
  getFn: canteenPageList,
  updateFn: canteenUpdate,
});

const handleUploadFile = async (file) => {
  let uploadFile = new FormData();
  uploadFile.append("file", file.file);
  const { code } = await canteenImport(uploadFile);
  if (code == "200") {
    ElMessage.success("上传成功");
    fileList.value = [];
    getDataSource();
  }
};
</script>
<template>
  <div class="btns">
    <el-upload
      v-model:file-list="fileList"
      :http-request="handleUploadFile"
      :limit="1"
    >
      <el-button type="primary">导入</el-button>

    </el-upload>
  </div>
  <CustomTable
    class="custom_table"
    :index="false"
    :selection="false"
    :indexWidth="100"
    :tableData="dataSource"
    :page="pagination"
    @page-change="onPageChange"
    :tableOption.sync="canteenColumns"
    operation
  >
    <template
      v-for="column in canteenColumns"
      #[column.prop]="scope"
      :key="column.prop"
    >
      <span v-if="!scope.row.isEdit">{{ scope.row[column.prop] }}</span>
      <el-input
        v-else
        v-model="scope.row[column.prop]"
        :placeholder="`请输入${column.label}`"
      ></el-input>
    </template>

    <template #menu="scope">
      <el-button @click="onEdit(scope.row)" v-if="!scope.row.isEdit" link
        >编辑</el-button
      >
      <template v-else>
        <el-button @click="onSave(scope.row)" link>保存</el-button>
        <el-button @click="onCancel(scope.row)" link>取消</el-button>
      </template>
    </template>
  </CustomTable>
</template>
<style lang="scss" scoped>
@import url("@/styles/daily.scss");
</style>
